<template>

  <a-card :bordered='false'>

    <!-- 查询区域 -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline' @keyup.enter.native='searchQuery'>
        <a-row :gutter='24'>

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item
              label='版本号'>
              <a-month-picker
                placeholder='请选择版本号'
                format='YYYY-MM'
                valueFormat='YYYY-MM'
                v-model='queryParam.ym'
                style='width:100%'
                v-decorator="['ym', {}]" />
            </a-form-item>
          </a-col>

          <!--<a-col :xl="6" :lg="7" :md="8" :sm="24">-->
          <!--<a-form-item-->
          <!--label="开始年月">-->
          <!--<a-month-picker style="width:100%" placeholder="请选择开始年月" format="YYYY-MM" valueFormat="YYYY-MM" v-model="queryParam.ymStart" v-decorator="['ymStart', {}]" />-->
          <!--</a-form-item>-->
          <!--</a-col>-->

          <!--<a-col :xl="6" :lg="7" :md="8" :sm="24">-->
          <!--<a-form-item-->
          <!--label="结束年月">-->
          <!--<a-month-picker style="width:100%" placeholder="请选择结束年月" format="YYYY-MM" valueFormat="YYYY-MM" v-model="queryParam.ymEnt" v-decorator="['ymEnt', {}]" />-->
          <!--</a-form-item>-->
          <!--</a-col>-->

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='门店名称'>
              <a-input placeholder='请输入门店名称' v-model='queryParam.terminalName'
                       v-decorator="['terminalName', {}]"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='门店编码'>
              <a-input placeholder='请输入编码' v-model='queryParam.terminalCode'
                       v-decorator="['terminalCode', {}]"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='总仓编码'>
              <a-input placeholder='请输入总仓编码' v-model='queryParam.paretTermCode'
                       v-decorator="['paretTermCode', {}]"></a-input>
            </a-form-item>
          </a-col>

          <template v-if='toggleSearchStatus'>
            <a-col :xl='6' :lg='7' :md='8' :sm='24'>
              <a-form-item label='查询某省'>
                <a-input placeholder='请输入省名称' v-model='queryParam.province'
                         v-decorator="['province', {}]"></a-input>
              </a-form-item>
            </a-col>

            <a-col :xl='6' :lg='7' :md='8' :sm='24'>
              <a-form-item label='查询某市'>
                <a-input placeholder='请输入市名称' v-model='queryParam.city'
                         v-decorator="['city', {}]"></a-input>
              </a-form-item>
            </a-col>

            <a-col :xl='6' :lg='7' :md='8' :sm='24'>
              <a-form-item label='查询某区'>
                <a-input placeholder='请输入区名称' v-model='queryParam.area'
                         v-decorator="['area', {}]"></a-input>
              </a-form-item>
            </a-col>
          </template>

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item
              label='门店类型'>
              <!--<a-select default-value=""-->
              <!--v-decorator="[ 'terminalType', {}]"-->
              <!--placeholder="请选择类型" v-model="queryParam.terminalType"-->
              <!--:getPopupContainer="(target) => target.parentNode"-->
              <!--allowClear>-->
              <!--<a-select-option value="10">医圈门店</a-select-option>-->
              <!--<a-select-option value="20">非医圈门店</a-select-option>-->
              <!--</a-select>-->
              <cn-dict-select-tag placeholder='请选择门店类型' dict-code='terminal_type' v-model='queryParam.terminalType' />
            </a-form-item>
          </a-col>

          <!--<a-col :xl="6" :lg="7" :md="8" :sm="24">-->
          <!--<a-form-item-->
          <!--label="店面类型">-->
          <!--<a-select default-value=""-->
          <!--v-decorator="[ 'store', {}]"-->
          <!--placeholder="请选择类型" v-model="queryParam.store"-->
          <!--:getPopupContainer="(target) => target.parentNode"-->
          <!--allowClear>-->
          <!--<a-select-option value="单体店">单体店</a-select-option>-->
          <!--<a-select-option value="连锁店">连锁店</a-select-option>-->
          <!--</a-select>-->
          <!--</a-form-item>-->
          <!--</a-col>-->

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item
              label='渠道类型'>
              <!--<a-select default-value=""-->
              <!--v-decorator="[ 'termChannel', {}]"-->
              <!--placeholder="请选择渠道" v-model="queryParam.termChannel"-->
              <!--:getPopupContainer="(target) => target.parentNode"-->
              <!--allowClear>-->
              <!--<a-select-option value="NKA">NKA全国连锁商超</a-select-option>-->
              <!--<a-select-option value="RKA">RKA区域连锁商超</a-select-option>-->
              <!--<a-select-option value="LKA">LKA当地连锁商超</a-select-option>-->
              <!--<a-select-option value="NBBS">NBBS全国连锁母婴店</a-select-option>-->
              <!--<a-select-option value="RKMBS">RKMBS区域连锁母婴店</a-select-option>-->
              <!--<a-select-option value="LKMBS">LKMBS当地连锁母婴店</a-select-option>-->
              <!--<a-select-option value="MBS">MBS单体母婴店</a-select-option>-->
              <!--<a-select-option value="Others">其他单体店</a-select-option>-->
              <!--</a-select>-->
              <cn-dict-select-tag placeholder='请选择渠道类型' dict-code='term_channel' v-model='queryParam.termChannel' />
            </a-form-item>
          </a-col>

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item
              label='门店等级'>
              <!--<a-select default-value=""-->
              <!--v-decorator="[ 'terminalLevel', {}]"-->
              <!--placeholder="请选择等级" v-model="queryParam.terminalLevel"-->
              <!--:getPopupContainer="(target) => target.parentNode"-->
              <!--allowClear>-->
              <!--<a-select-option value="A">A</a-select-option>-->
              <!--<a-select-option value="B">B</a-select-option>-->
              <!--<a-select-option value="C">C</a-select-option>-->
              <!--</a-select>-->
              <cn-dict-select-tag placeholder='门店等级' dict-code='terminal_level' v-model='queryParam.terminalLevel' />
            </a-form-item>
          </a-col>

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <a-form-item label='所属组织'>
              <j-tree-select placeholder='请选择所属组织'
                             v-model='queryParam.orgCode'
                             v-decorator="['orgCode', {}]"
                             data-type='org' />
            </a-form-item>
          </a-col>

          <!--<a-col :xl="6" :lg="7" :md="8" :sm="24">-->
          <!--<a-form-item label="申请开始">-->
          <!--<j-date-->
          <!--placeholder="请选择申请开始时间"-->
          <!--format='YYYY-MM-DD'-->
          <!--v-decorator="[ 'createDate', {}]"-->
          <!--style="width:100%"-->
          <!--v-model="queryParam.createDate"-->
          <!--/>-->
          <!--</a-form-item>-->
          <!--</a-col>-->

          <!--<a-col :xl="6" :lg="7" :md="8" :sm="24">-->
          <!--<a-form-item label="申请结束">-->
          <!--<j-date-->
          <!--placeholder="请选择申请结束时间"-->
          <!--format='YYYY-MM-DD'-->
          <!--v-decorator="[ 'remarks', {}]"-->
          <!--style="width:100%"-->
          <!--v-model="queryParam.remarks"-->
          <!--/>-->
          <!--</a-form-item>-->
          <!--</a-col>-->

          <a-col :xl='6' :lg='7' :md='8' :sm='24'>
            <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>
              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>
              <a @click='handleToggleSearch' style='margin-left: 8px'>
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <!--<div class="table-operator">-->
    <!--<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
    <!--<a-button type="primary" icon="start" @click="startorstop('009')">启用</a-button>-->
    <!--<a-button type="primary" icon="stop" @click="startorstop('003')">停用</a-button>-->
    <!--<a-button tabindex="primary" icon="delete" @click="batchDel">删除</a-button>-->
    <!--</div>-->

    <!-- 操作按钮区域 -->
    <!--<div class="table-operator">
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="updateApprovalBatch">
            <a-icon type="text"/>
            审批
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>-->

    <!--<div class="table-operator">-->
    <!--<a-popconfirm title="确定导出吗?" @confirm="() => exportXls('门店')">-->
    <!--<a-button type="primary" icon="download">导出</a-button>-->
    <!--</a-popconfirm>-->
    <!--</div>-->
    <div class='table-operator'>
      <a-button type='primary' icon='update' @click='doSfaTerminalExprot'>数据更新</a-button>
      <a-button type='primary' icon='download' @click="downExportXls('terminal_report')">导出</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>
        <i class='anticon anticon-info-circle ant-alert-icon'></i> 已选择 <a style='font-weight: 600'>{{
          selectedRowKeys.length }}</a>项
        <a style='margin-left: 24px' @click='onClearSelected'>清空</a>
      </div>

      <a-table
        ref='table'
        size='middle'
        bordered
        rowKey='id'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='ipagination'
        :loading='loading'
        class='j-table-force-nowrap'
        :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
        @change='handleTableChange'>


        <!--<span slot="action" slot-scope="text, record">
        <a-popconfirm title="确定审批通过吗?" @confirm="() => updateApproval(record.id)">
                  <a>审批</a>
        </a-popconfirm>
        </span>-->

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <!--<sfaPicFactory-modal ref="modalForm" @ok="modalFormOk"></sfaPicFactory-modal>-->
    <!--<img :src="bigImgSrc"/>-->
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction, downFile, getJSON } from '@/api/manage'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import Bar from '../../../components/chart/TransferBar'
import ACol from 'ant-design-vue/es/grid/Col'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import JDate from '@comp/cn-form/JDate'

export default {
  name: 'SfaTerminalList',
  mixins: [PageListMixin],
  components: {
    AFormItem,
    ACol,
    Bar,
    JTreeSelect,
    JAreaLinkage,
    JDate
  },
  data() {
    return {
      areaLinkage: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      showImg: false,
      too: '',
      description: '门店报表页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '版本号',
          align: 'center',
          dataIndex: 'ym'
        },
        {
          title: '门店编码',
          align: 'center',
          dataIndex: 'terminalCode'
        },
        {
          title: '门店名称',
          align: 'center',
          dataIndex: 'terminalName'
        },
        {
          title: '渠道类型',
          align: 'center',
          dataIndex: 'termChannel_dictText'
        },
        {
          title: '门店类型',
          align: 'center',
          dataIndex: 'terminalType_dictText'
        },
        {
          title: '门店等级',
          align: 'center',
          dataIndex: 'terminalLevel_dictText'
        },
        {
          title: '是否总仓门店',
          align: 'center',
          dataIndex: 'store'
        },
        {
          title: '总仓编码',
          align: 'center',
          dataIndex: 'paretTermCode'
        },
        {
          title: '总仓门店名称',
          align: 'center',
          dataIndex: 'storeName'
        },
        {
          title: '分店数量',
          align: 'center',
          dataIndex: 'num'
        },
        {
          title: '供给',
          align: 'center',
          dataIndex: 'supply'
        },
        {
          title: '经销商编码',
          align: 'center',
          dataIndex: 'custCode'
        },
        {
          title: '经销商名称',
          align: 'center',
          dataIndex: 'custName'
        },
        {
          title: '业务员编码',
          align: 'center',
          dataIndex: 'code'
        },
        {
          title: '业务员名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '门店联系人',
          align: 'center',
          dataIndex: 'linkman'
        },
        {
          title: '门店联系电话',
          align: 'center',
          dataIndex: 'telephone'
        },
        // {
        //   title: '大区经理',
        //   align: "center",
        //   dataIndex: 'regionalManager'
        // },
        // {
        //   title: '省经理',
        //   align: "center",
        //   dataIndex: 'provincialManager'
        // },
        // {
        //   title: '销售主管',
        //   align: "center",
        //   dataIndex: 'salesDirector'
        // },
        {
          title: '大区',
          align: 'center',
          dataIndex: 'region'
        },
        {
          title: '省',
          align: 'center',
          dataIndex: 'province'
        },
        {
          title: '市',
          align: 'center',
          dataIndex: 'city'
        },
        {
          title: '区',
          align: 'center',
          dataIndex: 'area'
        },
        // {
        //   title: '乡镇',
        //   align: "center",
        //   dataIndex: 'township'
        // },
        {
          title: '详细地址',
          align: 'center',
          dataIndex: 'address'
        },
        {
          title: '营业执照',
          align: 'center',
          dataIndex: 'businessLicense'
        },
        // {
        //   title: '流通许可证',
        //   align: "center",
        //   dataIndex: 'circulationLicense'
        // },
        {
          title: '门店申请注册日期',
          align: 'center',
          dataIndex: 'createDate'
        },
        // {
        //   title: '门店注册审核结果',
        //   align: "center",
        //   dataIndex: 'findingsOfAudit'
        // },
        // {
        //   title: '门店审核不合格原因',
        //   align: "center",
        //   dataIndex: 'reasonsForDisqualification'
        // },
        // {
        //   title: '门店审核通过日期',
        //   align: "center",
        //   dataIndex: 'dateOfApproval'
        // },

        {
          title: '停用启用状态',
          align: 'center',
          dataIndex: 'status',
          customRender: function(text) {
            if (text === '009') {
              return '启用'
            } else {
              return '停用'
            }
          }
        },
        {
          title: '是否删除',
          align: 'center',
          dataIndex: 'deleteStatus',
          customRender: function(text) {
            if (text === '009') {
              return '否'
            } else {
              return '是'
            }
          }
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remarks'
        }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: "center",
        //   scopedSlots: {customRender: 'action'}
        // }
      ],
      url: {
        list: window._CONFIG['domianSfaURL'] + '/terminal/sfaTerminal/findPageWebList',
        exportXlsUrl: window._CONFIG['domianSfaURL'] + '/terminal/sfaTerminal/exportXls',
        doSfaTerminalExprot: window._CONFIG['domianSfaURL'] + '/terminal/sfaTerminal/doSfaTerminalExprot'
      }
    }
  },
  methods: {
    exportXls(fileName) {
      //数据导出
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = { ...this.queryParam }
      //1.导出选择
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        //1.1有勾选导出勾选数据
        param['selections'] = this.selectedRowKeys.join(',')
        this.exportXlsex(param, fileName)
      } else {
        //1.2无勾选导出查询的所有数据
        //1.2.1查询所有搜索数据
        let request = null
        const isNoPagnation = ['getDictByCode'].some(url => new RegExp(`${url}$`).test(this.url.list))
        if (isNoPagnation) {
          request = getAction
        } else {
          request = postAction
        }
        param['size'] = this.ipagination.total
        param['current'] = '1'
        var params = param//查询条件
        //console.log("list导出参数", params)
        var that = this
        return request(this.url.list, params).then((res) => {
          if (res.success) {
            that.dataSource = isNoPagnation ? res.result : res.result.records
            //console.log(that.dataSource)
            that.too = ''
            for (let i = 0; i < that.dataSource.length; i++) {
              if (i === that.dataSource.length - 1) {
                that.too = that.too + that.dataSource[i].id
              } else {
                that.too = that.too + that.dataSource[i].id + ','
              }
            }
            param['selections'] = that.too
            //console.log("导出参数", param)
            that.exportXlsex(param, fileName)
          }
        })
      }
    },
    exportXlsex(param, fileName) {
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    doSfaTerminalExprot() {
      var that = this
      if (!this.url || !this.url.doSfaTerminalExprot) {
        // this.$message.error("请设置url.list属性!")
        return
      }
      // var params = this.getQueryParams();//查询条件
      this.loading = true
      postAction(this.url.doSfaTerminalExprot).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
        that.loading = false
      })
    }
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>